<template>
	<view class="content-wrap">
		<li-table class="data-table" @selection-change="handleSelectionChange" :columns="tableColumns"
			:tableOperations="tableOperations" @row-dblclick="dblclick" :toolbar="toolbar" v-bind="{ ...table }"
			:pagination="pagination" :init-search-param="{'deleted': false}" :request-api="requestApi">
			
			<template #toolBarHeader="scope">
				<el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')">新增用户</el-button>
				<el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected"
					@click="batchDelete(scope.selectedListIds)">
					批量删除用户
				</el-button>
			</template>

		</li-table>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchFormConfig: {
					inline: true,
					rules: {
						name: [{
								required: true,
								message: 'Please input Activity name',
								trigger: 'blur'
							},
							{
								min: 3,
								max: 5,
								message: 'Length should be 3 to 5',
								trigger: 'blur'
							},
						],
						region: [{
							required: true,
							message: 'Please select Activity zone',
							trigger: 'change',
						}],
						count: [{
							required: true,
							message: 'Please select Activity count',
							trigger: 'change',
						}],
						date1: [{
							type: 'date',
							required: true,
							message: 'Please pick a date',
							trigger: 'change',
						}, ],
						date2: [{
							type: 'date',
							required: true,
							message: 'Please pick a time',
							trigger: 'change',
						}, ],
						type: [{
							type: 'array',
							required: true,
							message: 'Please select at least one activity type',
							trigger: 'change',
						}, ],
						resource: [{
							required: true,
							message: 'Please select activity resource',
							trigger: 'change',
						}, ],
						desc: [{
							required: true,
							message: 'Please input activity form',
							trigger: 'blur'
						}, ],
					}
				},
				toolbar: {
					exportExcel: {
						filename: "table.xls",
						type: "xls", //支持xls，csv
						fields: {
							"用户名": "name",
							"手机号码": "phone",
							"用户状态": "status",
							"邮箱": "email",
							"角色": "role",
							"日期": "date"
						}
					}
				},
				table: {
					// height: "250",
					"show-summary": true,
					//SummaryMethodProps
					"summary-method": function(param) {
						const {
							columns,
							data
						} = param
						const sums = []
						columns.forEach((column, index) => {
							if (index === 0) {
								sums[index] = 'Total Cost'
								return
							}
							const values = data.map((item) => Number(item[column.property]))
							if (!values.every((value) => Number.isNaN(value))) {
								sums[index] = `$ ${values.reduce((prev, curr) => {
					        const value = Number(curr)
					        if (!Number.isNaN(value)) {
					          return prev + curr
					        } else {
					          return prev
					        }
					      }, 0)}`
							} else {
								sums[index] = 'N/A'
							}
						})

						return sums
					},
					border: true,
					localdata: [{
							key: 1,
							date: '2016-05-03',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							work_phone: '133xxxx1234',
							email: "abc@qq.com",
							person_phone: "131xxxx6789"
						},
						{
							key: 2,
							date: '2016-05-02',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							work_phone: '133xxxx1234',
							email: "abc@qq.com",
							person_phone: "131xxxx6789"
						},
						{
							key: 3,
							date: '2016-05-04',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							work_phone: '133xxxx1234',
							email: "abc@qq.com",
							person_phone: "131xxxx6789"
						},
						{
							key: 4,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							work_phone: '133xxxx1234',
							email: "abc@qq.com",
							person_phone: "131xxxx6789",
						},
						{
							key: 5,
							date: '2016-05-03',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							work_phone: '133xxxx1234',
							email: "abc@qq.com"
						},
						{
							key: 6,
							date: '2016-05-02',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
							work_phone: '133xxxx1234',
							email: "abc@qq.com"
						},
						{
							key: 7,
							date: '2016-05-04',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							key: 8,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							key: 9,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							key: 5,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							key: 10,
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},
						{
							date: '2016-05-01',
							name: 'Tom',
							address: 'No. 189, Grove St, Los Angeles',
						},

					],
				},
				tableColumns: [{
						type: "selection",
						width: 80
					},
					{
						type: "index",
						label: "#",
						width: 80
					},
					{
						prop: "date",
						label: "Date",
						width: "180",
						sortable: true,
						editable: true,
						search: {
							el: "el-input",
							tooltip: "date提示",
							clearable: true
							// sort: 0,  //排序
						},
					},
					{
						prop: "name",
						label: "Name",
						width: "180",
						search: {
							el: "el-input",
							tooltip: "Name提示",
						},
					},
					{
						prop: "address",
						label: "Address",
						width: "180",
						search: {
							el: "el-input",
							tooltip: "address",
						},
					},
					{
						label: "Contact",
						subColumns: [{
								prop: "phone",
								label: "Phone",
								width: "180",
								search: {
									el: "el-input",
									tooltip: "手机",
								},
								subColumns: [{
										prop: "person_phone",
										label: "Person phone",
										search: {
											el: "el-input",
											tooltip: "个人手机",
										},
									},
									{
										prop: "work_phone",
										label: "Work phone",
										search: {
											el: "el-input",
											tooltip: "工作手机",
										},
									}
								],
							},
							{
								prop: "email",
								label: "Email",
								width: "180",
								search: {
									el: "el-input",
									tooltip: "邮箱",
								}
							}
						]
					},
				],
				tableOperations: {
					label: "Action",
					// align: "center",
					fixed: "right",
					// width: "160",
					// actions: [{
					// 		text: '编辑',
					// 		icon: "Edit",
					// 		type: "primary",
					// 		click: () => {},
					// 	},
					// 	{
					// 		text: '删除',
					// 		icon: "Delete",
					// 		type: "danger",
					// 		click: () => {},
					// 	}
					// ],
				},
				pagination: {
					// total: 500, // 总记录条数
					pageSize: 5, // 每页显示的记录条数
					currentPage: 1,
					layout: "total, sizes, prev, pager, next, jumper"
				},
				
			};
		},
		onLoad() {
			let data = {
				toolbar: this.toolbar,
				...this.table,
				columns:this.tableColumns,
				tableOperations: this.tableOperations,
				showPagination: true,
				toolButton:true,
				requestApi: null,
				dataCallback: null,
				pagination: this.pagination
			}
			// console.log(JSON.stringify(data));
			
			// this.$http.get("/user/helloworld").then(data=>{
			// 	console.log(data)
			// })
			
		},
		methods: {
			onSubmit() {
				console.log("==onSubmit");
				console.log("data:", this.form.data);
			},
			reset() {
				console.log("==reset");
			},
			handleSelectionChange(val) {
				console.log("handleSelectionChange: ", val);
			},
			dblclick(row, column, event) {
				console.log("dblclick row: ", row, " column:", column, " event:", event);
			},
			openDrawer() {

			},
			requestApi(){
				
			}
		}
	}
</script>

<style>
	.content-wrap {
		display: flex;
		flex-direction: column;
		/*align-items: center;
		justify-content: center; */
		padding: 10px;
		
	}
	
	.data-table{
		.el-button {
			margin-bottom: 15px;
		}
	}
	

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}
</style>